<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>ACE</title>
<script type="text/javascript" src="../../../EWA_STYLE/js/js_jquery/EWA_ALL.min.2.0.js"></script>
<style type="text/css" media="screen">
#code {
	margin: 0;
	position: absolute;
	top: 0px;
	bottom: 20px;
	left: 0;
	right: 0;
}

.ace_replace_form {
	display: block !important;
}

#status {
	position: absolute;
	bottom: 0;
	height: 20px;
	left: 0;
	width: 100%;
	line-height: 20px;
	font-size: 12px;
	font-family: "Microsoft YaHei", "微软雅黑", tahoma, Verdana, Arial,
		sans-serif, arial, STHeiti, 宋体;
	line-height: 20px;
	overflow: hidden;
}

#status a {
	color: #f1f1f1;
	text-decoration: none;
	margin-left: 10px;
}

#status a:hover {
	color: red;
}

body {
	overflow: hidden;
}

::-webkit-scrollbar {
	width: 6px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background-color: #000000;
} /* 滚动条的滑轨背景颜色 */
::-webkit-scrollbar-thumb {
	background-color: rgba(77, 77, 77, 0.4);
} /* 滑块颜色 */
::-webkit-scrollbar-button {
	background-color: red;
} /* 滑轨两头的监听按钮颜色 */
::-webkit-scrollbar-corner {
	background-color: rgba(77, 77, 77, 0.4);
} /* 横向滚动条和纵向滚动条相交处尖角的颜色 */
</style>
</head>
<body>
	<pre id="code"></pre>
	<div id='status'>
		<a href="javascript:beautify_code()" title="(Cmd+Shift+F)">格式化代码</a> <span style='float: right'> <a>Theme:</a> <select
			id="theme" size="1" onchange="change_code_theme(this)">
				<optgroup label="Bright">
					<option value="ace/theme/chrome">Chrome</option>
					<option value="ace/theme/clouds">Clouds</option>
					<option value="ace/theme/crimson_editor">Crimson Editor</option>
					<option value="ace/theme/dawn">Dawn</option>
					<option value="ace/theme/dreamweaver">Dreamweaver</option>
					<option value="ace/theme/eclipse">Eclipse</option>
					<option value="ace/theme/github">GitHub</option>
					<option value="ace/theme/iplastic">IPlastic</option>
					<option value="ace/theme/solarized_light">Solarized Light</option>
					<option value="ace/theme/textmate">TextMate</option>
					<option value="ace/theme/tomorrow">Tomorrow</option>
					<option value="ace/theme/xcode">XCode</option>
					<option value="ace/theme/kuroir">Kuroir</option>
					<option value="ace/theme/katzenmilch">KatzenMilch</option>
					<option value="ace/theme/sqlserver">SQL Server</option>
				</optgroup>
				<optgroup label="Dark">
					<option value="ace/theme/ambiance">Ambiance</option>
					<option value="ace/theme/chaos">Chaos</option>
					<option value="ace/theme/clouds_midnight">Clouds Midnight</option>
					<option value="ace/theme/cobalt" selected>Cobalt</option>
					<option value="ace/theme/gruvbox">Gruvbox</option>
					<option value="ace/theme/idle_fingers">idle Fingers</option>
					<option value="ace/theme/kr_theme">krTheme</option>
					<option value="ace/theme/merbivore">Merbivore</option>
					<option value="ace/theme/merbivore_soft">Merbivore Soft</option>
					<option value="ace/theme/mono_industrial">Mono Industrial</option>
					<option value="ace/theme/monokai">Monokai</option>
					<option value="ace/theme/pastel_on_dark">Pastel on dark</option>
					<option value="ace/theme/solarized_dark">Solarized Dark</option>
					<option value="ace/theme/terminal">Terminal</option>
					<option value="ace/theme/tomorrow_night">Tomorrow Night</option>
					<option value="ace/theme/tomorrow_night_blue">Tomorrow Night Blue</option>
					<option value="ace/theme/tomorrow_night_bright">Tomorrow Night Bright</option>
					<option value="ace/theme/tomorrow_night_eighties">Tomorrow Night 80s</option>
					<option value="ace/theme/twilight">Twilight</option>
					<option value="ace/theme/vibrant_ink">Vibrant Ink</option>
				</optgroup>
		</select></span>
	</div>
	<script src="../../../thrid-party/ace/build/src/ace.js" type="text/javascript"></script>
	<script src="../../../thrid-party/ace/build/src/ext-language_tools.js" type="text/javascript"></script>
	<script src="../../../thrid-party/js-beautify/js/lib/beautify.js"></script>
	<script src="../../../thrid-party/js-beautify/js/lib/beautify-html.js"></script>
	<script src="../../../thrid-party/js-beautify/js/lib/beautify-css.js"></script>
	<script type="text/javascript">
		var editor, beautify;
		var parent_textarea;
		function update() {
			if (parent_textarea) {
				parent_textarea.value = getText();
			}
		}
		function aa() {
			var iframes = window.parent.document.getElementsByTagName('iframe');
			for (var i = 0; i < iframes.length; i++) {
				var o = iframes[i];
				if (o.contentWindow == window) {
					var textareas = o.parentNode.parentNode.getElementsByTagName('textarea');
					if (textareas.length > 0) {
						//存放markdown的数据
						parent_textarea = textareas[0];
					} else {
						// alert('parent textarea not found');
					}
				}
			}
			editor = null;
			var u1 = new EWA_UrlClass();
			var markType = u1.GetParameter("__TYPE__");
			if (!markType) {
				if (!window.parent.__TYPE__) {
					return;
				}
				markType = window.parent.__TYPE__;
			}
			// console.log(markType);
			var valId = u1.GetParameter("__SID__");
			var val;
			if (!valId) {
				val = window.parent.__VAL__;
			} else {
				var objVal = parent.document.getElementById(valId);
				if (objVal) {
					val = objVal.value;
				}
			}
			// console.log(val);
			if (val == null) {
				val = "";
			}
			//console.log(markType,val);
			mode = 'ace/mode/html';
			if (document.getElementById('check_sql')) {
				document.getElementById('check_sql').style.display = 'none';
			}
			if (markType == 'sql') {
				mode = 'ace/mode/sql';
				if (document.getElementById('check_sql')) {
					document.getElementById('check_sql').style.display = '';
				}
			} else if (markType == 'jscript' || markType == 'js') {
				mode = 'ace/mode/javascript';
			} else if (markType == 'xml') {
				mode = 'ace/mode/xml';
			} else if (markType == 'css') {
				mode = 'ace/mode/css';
			}
			if (document.getElementById('code')) {
				document.body.removeChild(document.getElementById('code'));
				var pre = document.createElement('pre');
				pre.id = 'code';
				document.body.appendChild(pre);
			}

			ace.require("ace/ext/language_tools");

			editor = ace.edit("code");
			var theme_code = "ace/theme/cobalt";
			if (window.localStorage && window.localStorage["EWA_CODE_THENE"]) {
				var v = window.localStorage["EWA_CODE_THENE"];
				var obj = document.getElementById('theme');
				for (var i = 0; i < theme.options.length; i++) {
					var v1 = obj.options[i].value;
					if (v1 == v) {
						theme_code = v1;
						obj.value = v1;
						break;
					}
				}
			}

			editor.setTheme(theme_code);
			editor.session.setMode(mode);
			editor.getSession().setUseWrapMode(true);

			editor.setOptions({
				enableBasicAutocompletion : true,
				enableSnippets : true,
				enableLiveAutocompletion : true
			});

			editor.commands.addCommand({
				name : 'myCommand',
				bindKey : {
					win : 'Ctrl-Shift-F',
					mac : 'Command-Shift-F'
				},
				exec : function(editor) {
					beautify_code();
				},
				readOnly : true
			});
			editor.commands.addCommand({
				name : 'myCommandSave',
				bindKey : {
					win : 'Ctrl-S',
					mac : 'Command-S'
				},
				exec : function(editor) {
					try {
						parent.parent.save();
						top.saveXml();
					} catch (e) {
						console.log(e);
					}
				},
				readOnly : true
			});
			editor.setValue(val, 1);
			editor.selection.clearSelection();
			if (markType == 'xml') {
				editor.setOption('readOnly', true);
			}
			editor.getSession().on('change', function(e) {
				update();
			});
			editor.$blockScrolling = Infinity;
		}
		function beautify_code() {
			var p = editor.getCursorPosition();
			var s;
			if (mode == 'ace/mode/javascript') {
				s = js_beautify(getText());
			} else if (mode == 'ace/mode/html') {
				s = html_beautify(getText());
			} else if (mode == 'ace/mode/css') {
				s = css_beautify(getText());
			} else if (mode == 'ace/mode/sql') {
				beautify_code_sql();
				return;
			} else {
				$Tip('不支持类型格式化');
				return;
			}
			editor.setValue(s, 1);
			editor.moveCursorToPosition(p);
			editor.selection.clearSelection();
		}
		function beautify_code_sql() {

		}
		function style_html(s1) {
			var s = html_beautify(s1);
			return s;
		}
		function getText() {
			return editor.getValue();
		}
		function setText(t) {
			editor.setValue(editor.getValue() + t, 1);
		}
		function change_code_theme(obj) {
			editor.setTheme(obj.value);
			window.localStorage["EWA_CODE_THENE"] = obj.value;
		}
		aa();
	</script>
</body>
</html>